<template>
	<el-dialog modal-class="dialog-wrapper" v-model="visible" :show-close="false" width="500" class="dialog-container">
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h4 :id="titleId" :class="titleClass + ' title-class'">账单详情</h4>
				<div>
					<el-button style="background-color: #ffffff;border: #ffffff;border-radius: 50px" type="danger" @click="close">
						<span style="color: #000000">修改</span>
					</el-button>
					<el-button style="background-color: #f6dcdc;border: #f6dcdc;border-radius: 50px" type="danger" @click="close">
						<span style="color: #f46e6e">删除</span>
					</el-button>
				</div>
			</div>
		</template>
		<div class="content-wrapper">
			<div class="content-item">
				<div>金额</div>
				<div>{{record.amount}}</div>
			</div>
			<div class="content-item">
				<div>分类</div>
				<div>{{record.categoryName}}</div>
			</div>
			<div class="content-item">
				<div>入账账户</div>
				<div>{{record.accountName}}</div>
			</div>
			<div class="content-item">
				<div>时间</div>
				<div>{{record.transactionMouthDay}}</div>
			</div>
			<div class="content-item">
				<div>备注</div>
				<div></div>
			</div>
		</div>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElButton, ElDialog } from 'element-plus'

const visible = ref(false)
const record = reactive({
	amount: 0,
	categoryName: '',
	accountName: '',
	transactionMouthDay: '',
})

// 打开弹窗
const open = (recordItem: any) => {
	visible.value = true;
	record.amount = recordItem.amount
	record.accountName = recordItem.accountName;
	record.categoryName = recordItem.categoryName;
	record.transactionMouthDay = recordItem.transactionMouthDay;
	console.log(recordItem)
}

// 关闭弹窗
const close = () => {
	visible.value = false;
}

// 暴露变量
defineExpose({
	open,
	close,
});
</script>

<style lang="scss">
.my-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 16px;
}

.el-overlay.dialog-wrapper {
	background-color: rgba(204, 204, 204, .7) !important;
}

.title-class {
	font-weight: bold;
}

.dialog-container {
	/*#cccccc*/
	background-color: #f5f5f5;
	border-radius: 12px !important;
}

.content-wrapper {
	background-color: #ffffff;
	border-radius: 10px;
	padding: 0 15px 0 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	
	.content-item {
		height: 50px;
		width: 100%;
		display: flex; /* 添加 flex 布局 */
		align-items: center; /* 垂直方向居中 */
		justify-content: space-between
	}
}


</style>
